<div class="ssl-search-link">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="input-group">
          <input [formControl]="keywords" (keyup.enter)="onSubmit()" type="text" class="form-control" placeholder="搜索链接，例如：百度">
          <span class="input-group-btn">
            <button (click)="onSubmit()" class="btn btn-success" type="button"><i class="glyphicon glyphicon-search"></i> 搜索</button>
          </span>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <h4 class="text-center ssl-title">热门搜索</h4>
        <button class="btn btn-link" (click)="onHotItemClick('百度')">百度</button>
        <button class="btn btn-link" (click)="onHotItemClick('Angular')">Angular</button>
        <button class="btn btn-link" (click)="onHotItemClick('Bootstrap')">Bootstrap</button>
        <button class="btn btn-link" (click)="onHotItemClick('GitHub')">GitHub</button>
        <button class="btn btn-link" (click)="onHotItemClick('博客园')">博客园</button>
        <button class="btn btn-link" (click)="onHotItemClick('SuSuLink')">SuSuLink</button>
        <button class="btn btn-link" (click)="onHotItemClick('速速链接')">速速链接</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12">
        <h4 class="text-center ssl-title">搜索历史</h4>
        <div *ngIf="search_histories.length === 0" class="text-center">
          <h6 class="text-warning"><span class="glyphicon glyphicon-info-sign"></span> 暂无搜索记录&hellip;</h6>
        </div>
        <button *ngFor="let item of search_histories;" (click)="onHistoryItemClick(item);" class="btn btn-link ssl-history-item">{{item}}</button>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12" style="margin: 15px 0;">
        <button class="btn btn-warning btn-block" (click)="onClearHistoriesClick()"><i class="glyphicon glyphicon-trash"></i> 清空搜索记录</button>
        <button class="btn btn-default btn-block" (click)="onBack()">返回 <span class="glyphicon glyphicon-share-alt"></span></button>
      </div>
    </div>
  </div>
</div>
